<template>
    <div>
        <a-card>
            <a-page-header
      :ghost="true"
      title="网络信息"
      sub-title="设备组网信息"
    ></a-page-header>
            <a-form
                :model="networkFormModel"
                name="network_info"
                layout="inline"
                autocomplete="off"
                >
                    <a-form-item style="width:200px;"
                        label="IP"
                        name="ipAddr"
                        :rules="[{ required: true, message: '输入IP地址' }]">
                        <a-input v-model:value="networkFormModel.ipAddr">
                        </a-input>
                    </a-form-item>
                    <a-form-item style="width:200px;"
                        label="PORT"
                        name="port"
                        :rules="[{ required: true, message: '输入端口' }]">
                        <a-input v-model:value="networkFormModel.port">
                        </a-input>
                    </a-form-item>
                    <a-form-item style="width:200px;"
                        label="MAC"
                        name="mac"
                        :rules="[{ required: true, message: '输入12位MAC地址' }]">
                        <a-input v-model:value="networkFormModel.mac">
                        </a-input>
                    </a-form-item>
                    <a-form-item style="width:200px;"
                        label="DNS"
                        name="dns"
                        :rules="[{ required: true, message: '输入DNS地址' }]">
                        <a-input v-model:value="networkFormModel.dns">
                        </a-input>
                    </a-form-item>
                    <a-form-item style="width:200px;"
                        label="网关地址"
                        name="gateway"
                        :rules="[{ required: true, message: '输入网关地址' }]">
                        <a-input v-model:value="networkFormModel.gateway">
                        </a-input>
                    </a-form-item>
                    <a-form-item style="width:200px;"
                        label="子网掩码"
                        name="subnetmask"
                        :rules="[{ required: true, message: '输入子网掩码' }]">
                        <a-input v-model:value="networkFormModel.subnetmask">
                        </a-input>
                    </a-form-item>
                    <br/>
                    <a-form-item >
                        <a-button type="primary" @click.prevent="onNetworkSubmit">保存</a-button>
                    </a-form-item>
                </a-form>
        </a-card>
        <a-card>
            <a-page-header
      :ghost="true"
      title="边界值设置"
    ></a-page-header>
            <a-form
                :model="networkFormModel"
                name="limit_info"
                layout="inline"
                autocomplete="off"
                >
                <a-form-item style="width:200px;"
                        label="主电压最大值(10-13.5)"
                        name="subnetmask"
                        :rules="[{ required: true, message: '主电压最大值' },{ min: 10,max: 13.5,message: '电压值需要在10V到13.5V范围',}]">
                        <a-input v-model:value="networkFormModel.subnetmask">
                        </a-input>
                    </a-form-item>

                    <a-form-item style="width:200px;"
                        label="主电压最小值(10-13.5)"
                        name="subnetmask"
                        :rules="[{ required: true, message: '主电压最小值' },{ min: 10,max: 13.5,message: '电压值需要在10V到13.5V范围',}]">
                        <a-input v-model:value="networkFormModel.subnetmask">
                        </a-input>
                    </a-form-item>
                <a-form-item style="width:200px;"
                        label="备电压最大值(10-13.5)"
                        name="subnetmask"
                        :rules="[{ required: true, message: '备电压最大值' },{ min: 10,max: 13.5,message: '电压值需要在10V到13.5V范围',}]">
                        <a-input v-model:value="networkFormModel.subnetmask">
                        </a-input>
                    </a-form-item>

                    <a-form-item style="width:200px;"
                        label="备电压最小值(10-13.5)"
                        name="subnetmask"
                        :rules="[{ required: true, message: '备电压最小值' },{ min: 10,max: 13.5,message: '电压值需要在10V到13.5V范围',}]">
                        <a-input v-model:value="networkFormModel.subnetmask">
                        </a-input>
                    </a-form-item>
                    <a-form-item style="width:200px;"
                        label="总电流最大值"
                        name="subnetmask"
                        :rules="[{ required: true, message: '总电流最大值' },{ min: 30,max: 50,message: '电压值需要在30V到50V范围',}]">
                        <a-input v-model:value="networkFormModel.subnetmask">
                        </a-input>
                    </a-form-item>

                    <a-form-item style="width:200px;"
                        label="风扇开启温度(20-40)"
                        name="subnetmask"
                        :rules="[{ required: true, message: '风扇开启温度' },{ min: 20,max: 40,message: '温度需要保持在20-40度',}]">
                        <a-input v-model:value="networkFormModel.subnetmask">
                        </a-input>
                    </a-form-item>
                <br/>
                    <a-form-item >
                        <a-button type="primary" @click.prevent="onLimitSubmit">保存</a-button>
                    </a-form-item>
                </a-form>
        </a-card>
    </div>
</template>

<script>
import { validate } from 'json-schema';
import { Form } from 'ant-design-vue';

const useForm = Form.useForm;
export default {
    name:"DeviceBasicInfo",
    props: {
        deviceObj: {
            required: true,
            type: Object,
            default: {
                baseinfo: {
                    name: '请选择一个设备',
                },
                id: 0,
            },
        },
    },
    components: {},
    data() {
        return {
            networkFormModel:{},
        }
    },
    mounted() {
        
    },
    created() {
        
    },
    methods:{
        onNetworkSubmit(){
            console.log("onNetworkSubmit");
        },
        onLimitSubmit(){
            validate()
                .then(() => {
                    console.log(modelRef);
                })
                .catch(err => {
                    console.log('error', err);
                });
            console.log("onLimitSubmit");
        },
    }

}
</script>

<style>

</style>